<template>
  <!-- 爱心 -->
  <div :class="{ 'box12': props.width === '12', 'box22': props.width === '22', 'box': props.width === 'followed' }">
    <div class="love" :class="{ 'like': props.item.loveFlag, 'hover': props.item.loveFlag }" @click.stop="love">
    </div>
    <!-- <div :class="{ 'red': props.item.loveFlag }">23456</div> -->
    <!-- 爱心数量 -->
    <span class="number" :class="{ 'numberActive': props.item.loveFlag }" v-if="props.width === '12'">{{
    props.item.likeNum }}</span>
    <span class="number" :class="{ 'numberActive': props.item.loveFlag, 'num': props.width === 'followed' }" v-else>{{
    props.item.WSLCNum.likeNum }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object || Array
  },
  width: {
    type: String
  }
});
// console.log(props.item, '12345');
const emit = defineEmits(['love'])
const love = () => {
  if (props.width === '12') {
    let params12 = {
      userId: props.item.Comment.userId,
      videoId: props.item.Comment.videoId,
      commentId: props.item.Comment.commentId
    }
    emit('love', params12)
  } else if (props.width === '22') {
    let params22 = {
      userId: props.item.Video.userId,
      videoId: props.item.Video.videoId,
    }
    emit('love', params22)
  } else {
    let params = props.item.Video.videoId
    emit('love', params)
  }
}

</script>

<style lang="scss" scoped>
// 爱心
.box12,
.box22,
.box {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  margin-bottom: 25px;

  .love {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 30px;
    margin-right: 20px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: #626260;
    transform: rotate(-45deg);
    z-index: 5;
    transition: transform 0.5s;


    &::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 0;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #626260;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 6px;
      width: 12px;
      height: 12px;
      background-color: #626260;
      border-radius: 50%;
    }
  }

  .hover {
    transition: transform 0.3s;
    transform: scale(1.5) rotate(-45deg);
  }

  .like {
    background-color: red;

    &::after {
      background-color: red;
    }

    &::before {
      background-color: red;
    }
  }

  // 爱心数量
  .number {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 21px;
    margin-bottom: -20px;
    font-size: 12px;
    color: #626260;
    z-index: 5;
  }

  .numberActive {
    color: red;
  }
}

.num {
  margin-right: 0px !important;
  margin-bottom: 8px !important;
}

.box {
  z-index: 10;
  left: 0;
  bottom: 0;
  margin-bottom: 3px;
  margin-left: -5px;

  .love {
    background-color: #fff;
    width: 16px;
    height: 16px;

    &::after {
      background-color: #fff;
      width: 16px;
      height: 16px;
      left: 9px;
    }

    &::before {
      background-color: #fff;
      width: 16px;
      height: 16px;
      top: -9px;
    }
  }

  .numberActive {
    color: red;
  }

  .like {
    background-color: red;

    &::after {
      background-color: red;
    }

    &::before {
      background-color: red;
    }
  }

  .hover {
    transition: transform 0.3s;
    transform: scale(1.3) rotate(-45deg);
  }

  // 爱心数量
  .number {
    margin-right: -7px !important;
    color: #fff;
  }
}

.box22 {
  margin-bottom: 225px;

  .love {
    width: 22px;
    height: 22px;
    background-color: #fff;

    &::before {
      width: 22px;
      height: 22px;
      top: -11px;
      background-color: #fff;
    }

    &::after {
      width: 22px;
      height: 22px;
      left: 11px;
      background-color: #fff;
    }

  }

  .number {
    margin-bottom: -30px;
    margin-right: 25px !important;
    color: #fff;
  }

  .numberActive {
    color: red;
  }

  .like {
    background-color: red;

    &::after {
      background-color: red;
    }

    &::before {
      background-color: red;
    }
  }
}
</style>